<template>
	<view class="weight-container">
		<!-- 最新体重 -->
		<view class="latest-weight">
			<view class="section-header">
				<text>最新体重</text>
				<view class="view-more" style="z-index: 99;" @click="toMoreWeight">查看更多 ></view>
			</view>
			<view class="weight-display">
				<view class="weight-value">{{currentWeight}}<text class="unit">kg</text></view>
				<view class="bmi-info">BMI {{currentBMI}}</view>
			</view>
			<view class="measure-time" v-if="records.length>0">测量日期：{{records[0].measuredTime}} <span
					style="padding-left: 10px;" :style="{color: records[0].color}">{{ records[0].tag}}</span></view>
		</view>


		<!-- 体重对比 -->
		<view class="weight-compare">
			<view class="section-header">
				<text>体重对比</text>
			</view>
			<view class="compare-cards">
				<view class="compare-card decrease" v-if="comparisonData.lastFlag==='0'">
					<view class="compare-value green">{{comparisonData.lastDiff }}kg</view>
					<view class="compare-info">
						<view class="compare-icon text-green">▼</view>
						<view class="compare-text">比上次({{ comparisonData.lastDate }})</view>
					</view>
				</view>
				<view class="compare-card decrease" v-if="comparisonData.lastFlag==='1'">
					<view class="compare-value red">{{comparisonData.lastDiff }}kg</view>
					<view class="compare-info">
						<view class="compare-icon text-red">▲</view>
						<view class="compare-text">比上次({{ comparisonData.lastDate }})</view>
					</view>
				</view>
				<view class="compare-card increase" v-if="comparisonData.tenDaysFlag==='0'">
					<view class="compare-value green">{{ comparisonData.tenDaysDiff }}kg</view>
					<view class="compare-info">
						<view class="compare-icon text-green">▼</view>
						<view class="compare-text">比{{comparisonData.betweenDay}}天前({{ comparisonData.tenDaysDate }})</view>
					</view>
				</view>
				<view class="compare-card increase" v-if="comparisonData.tenDaysFlag==='1'">
					<view class="compare-value red">{{ comparisonData.tenDaysDiff }}kg</view>
					<view class="compare-info">
						<view class="compare-icon text-red">▲</view>
						<view class="compare-text">比{{comparisonData.betweenDay}}天前({{ comparisonData.tenDaysDate }})</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 理想体重和体重范围 -->
<!-- 		<view class="ideal-weight">
			<view class="section-header">
				<text>理想体重 116.4斤</text>
			</view>
			<view class="weight-range-bar">
				<view class="range-segment underweight" style="width: 20%">
					<text class="range-label">偏轻</text>
					<text class="range-value">103.2</text>
				</view>
				<view class="range-segment normal" style="width: 30%">
					<text class="range-label">标准</text>
					<text class="range-value">103.2-133.9</text>
				</view>
				<view class="range-segment overweight" style="width: 25%">
					<text class="range-label">偏重</text>
					<text class="range-value">133.9-156.2</text>
				</view>
				<view class="range-segment obese" style="width: 25%">
					<text class="range-label">过重</text>
					<text class="range-value">156.2+</text>
				</view>
				<view class="current-indicator" :style="{left: currentWeightPosition + '%'}">
					<view class="indicator-dot"></view>
				</view>
			</view>
		</view> -->

		<!-- 数据记录 -->
		<view class="data-records">
			<view class="section-header">
				<text>数据记录</text>
				<view class="view-more" @click="toMoreWeight">查看更多 ></view>
			</view>
			<view class="record-item" v-for="(item, index) in records" :key="index" v-if="records.length>0">
				<view class="record-main">
					<text class="value">体重：{{item.weight}}kg</text>
					<text>BMI：{{item.bmi}}%</text>
				</view>
				<view class="record-sub">
					<text>身高：{{item.height}}CM</text>
					<text>上传方式：{{item.sourceName}}</text>
				</view>
				<view class="record-details">
					<text>测量时间：{{item.measuredTime}}</text>
					<text>上传时间：{{item.measuredTime}}</text>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-button">
			<button class="add-record" @click="addRecord">添加体重</button>
		</view>
	</view>
</template>

<script>
	import {
		listWeight,
		queryWeightTypeList,
		queryDateCompare
	} from '@/api/healthData/everyWeight.js'

	export default {
		data() {
			return {
				userId: this.$store.state.user.userId,
				records: [],
				dictsList: [],
				targetId: '',
				currentWeight: '-',
				currentBMI: '-',
				bmiStatus: '-',
				currentWeightPosition: 75, // 当前体重在范围条上的位置百分比
				comparisonData:{}
			};
		},
		created() {

		},
		onShow() {
			this.listWeight()
		},
		onLoad(options) {
			this.targetId = options.targetId
			this.queryWeightTypeList()
		},
		methods: {
			addRecord() {
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/add-weight?targetId=' + this.targetId
				})
			},
			toMoreWeight() {
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/more-weight',
				});
			},

			listWeight() {
				listWeight({
					userId: this.userId
				}).then(res => {
					console.log('体重API Response:', res)
					if (res.rows && res.rows.length > 0) {
						// 保存原始数据
						const allRows = [...res.rows]
						console.log('All weight rows:', allRows)

						// 更新记录显示
						if (res.rows.length >= 2) {
							this.records = res.rows.splice(0, 2)
						} else {
							this.records = res.rows
						}
						console.log('Updated weight records:', this.records)

						// 更新当前体重和BMI
						if (allRows.length > 0) {
							this.currentWeight = allRows[0].weight || '-'
							this.currentBMI = allRows[0].bmi || '-'
							this.bmiStatus = allRows[0].tag || '-'
						}

						this.queryDateCompare()
					}
				}).catch(err => {
					console.error('Error fetching weight data:', err)
				})
			},


			queryWeightTypeList() {
				queryWeightTypeList({
					targetId: this.targetId
				}).then(res => {
					this.dictsList = res.data
					console.log('体重类型列表:', this.dictsList)
				}).catch(err => {
					console.error('获取体重类型失败:', err)
				})
			},

			//获取数据对比
			queryDateCompare() {
				queryDateCompare(this.records[0].id).then(res => {
					this.comparisonData = res.data
				})
			}
		}
	};
</script>

<style scoped>
	.weight-container {
		min-height: 100vh;
		background: #fff;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
	}

	.view-more {
		color: #7BC691;
		font-size: 13px;
	}

	.latest-weight {
		padding: 0 15px 20px;
		position: relative;
		overflow: hidden;
	}

	.latest-weight .section-header {
		position: relative;
		overflow: hidden;
	}

	.latest-weight .section-header::after {
		content: '';
		position: absolute;
		top: 26rpx;
		left: 10rpx;
		width: 100%;
		height: 50rpx;
		background-image: url('https://www.ruilongan.com/profile/upload/2025/06/27/路径@2x_20250627113158A059.png');
		background-repeat: no-repeat;
		background-position: left top;
		background-size: contain;
		z-index: 1;
	}

	.latest-weight .section-header text:first-child {
		position: relative;
		z-index: 2;
		font-size: 38rpx;
		font-weight: 500;
		color: #000;
	}

	.latest-weight .section-header .view-more {
		position: relative;
		z-index: 2;
	}

	.weight-display {
		text-align: center;
		margin: 30px 0;
	}

	.weight-value {
		font-size: 48px;
		font-weight: 500;
		color: #333;
		line-height: 1.2;
	}

	.weight-value .unit {
		font-size: 24px;
		color: #999;
		margin-left: 5px;
	}

	.bmi-info {
		font-size: 16px;
		color: #333;
		margin-top: 10px;
	}

	.measure-time {
		text-align: center;
		color: #abaeaf;
		font-size: 13px;
		margin-top: 15px;
		position: relative;
		z-index: 2;
	}


	.weight-compare {
		padding: 24rpx;
	}

	.compare-cards {
		display: flex;
		padding: 0 8px;
		gap: 15px;
	}

	.compare-card {
		flex: 1;
		background: #f8f9fa;
		border-radius: 8px;
		padding: 8px;
		text-align: center;
		position: relative;
	}

	.compare-value {
		font-size: 20px;
		font-weight: 500;
		margin-bottom: 5px;
	}

	.compare-value.green {
		color: #52c41a;
	}

	.compare-value.red {
		color: #ff4d4f;
	}

	.compare-info {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
	}

	.compare-icon {
		font-size: 16px;
	}

	.compare-card.decrease .compare-icon {
		/* color: #52c41a; */
	}

	.compare-card.increase .compare-icon {
		/* color: #ff4d4f; */
	}

	.compare-text {
		font-size: 12px;
		color: #666;
	}

	.ideal-weight {
		padding: 24rpx;
	}

	.weight-range-bar {
		position: relative;
		height: 40px;
		background: #f0f0f0;
		border-radius: 20px;
		margin: 15px;
		overflow: hidden;
		display: flex;
	}

	.range-segment {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.range-segment.underweight {
		background: #1890ff;
	}

	.range-segment.normal {
		background: #52c41a;
	}

	.range-segment.overweight {
		background: #faad14;
	}

	.range-segment.obese {
		background: #ff4d4f;
	}

	.range-label {
		font-size: 10px;
		color: #fff;
		font-weight: 500;
	}

	.range-value {
		font-size: 8px;
		color: #fff;
		margin-top: 2px;
	}

	.current-indicator {
		position: absolute;
		top: -5px;
		transform: translateX(-50%);
		z-index: 10;
	}

	.indicator-dot {
		width: 10px;
		height: 10px;
		background: #fff;
		border: 2px solid #ff4d4f;
		border-radius: 50%;
	}

	.data-records {
		padding: 24rpx;
		padding-bottom: 120rpx;
		/* 为底部按钮留出空间 */
	}

	.record-item {
		padding: 15px;
		border-bottom: 1px solid #f5f5f5;
	}

	.record-main {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
		font-size: 14px;
	}

	.record-main .value {
		color: #333;
		font-size: 14px;
		font-weight: normal;
	}

	.record-sub {
		display: flex;
		justify-content: space-between;
		color: #666;
		font-size: 14px;
		margin-bottom: 5px;
	}

	.record-details {
		display: flex;
		justify-content: space-between;
		color: #999;
		font-size: 10px;
		flex-wrap: nowrap;
		gap: 10px;
	}

	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 15px;
		background: #fff;
		box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
	}

	.add-record {
		background: #10c558;
		color: #fff;
		border-radius: 10px;
		font-size: 15px;
		height: 44px;
		line-height: 44px;
		border: none;
		width: 100%;
		margin: 0;
	}

	.weight-trend .section-header,
	.weight-compare .section-header,
	.data-records .section-header,
	.ideal-weight .section-header {
		position: relative;
		overflow: hidden;
	}

	.weight-trend .section-header::after,
	.weight-compare .section-header::after,
	.data-records .section-header::after,
	.ideal-weight .section-header::after {
		content: '';
		position: absolute;
		top: 26rpx;
		left: 10rpx;
		width: 100%;
		height: 50rpx;
		background-image: url('https://www.ruilongan.com/profile/upload/2025/06/27/路径@2x_20250627113158A059.png');
		background-repeat: no-repeat;
		background-position: left top;
		background-size: contain;
		z-index: 1;
	}

	.weight-trend .section-header text:first-child,
	.weight-compare .section-header text:first-child,
	.data-records .section-header text:first-child,
	.ideal-weight .section-header text:first-child {
		position: relative;
		z-index: 2;
		font-size: 38rpx;
		font-weight: 500;
		color: #000;
	}

	.weight-trend .section-header .view-more,
	.weight-compare .section-header .view-more,
	.data-records .section-header .view-more,
	.ideal-weight .section-header .view-more {
		position: relative;
		z-index: 2;
	}
</style>